import React, { useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Form, Modal } from 'antd';
import { useIntl } from 'umi';
import OperpForm from '@/components/OperpForm';
import moment from 'moment';

export default (): React.ReactNode => {
  const intl = useIntl();
  const [visible, setVisible] = useState<boolean>(false);
  const [visible2, setVisible2] = useState<boolean>(false);
  const [record, setRecord] = useState<any>(null);
  const [record2, setRecord2] = useState<any>(null);
  const [record3] = useState<any>(null);
  const [current] = useState<any>(null);
  const [form] = Form.useForm();
  const [form2] = Form.useForm();
  const [form3] = Form.useForm();

  React.useEffect(() => {}, []);
  return (
    <PageContainer title={false}>
      <OperpForm
        title={intl.formatMessage({ id: 'pages.POEntry' })}
        gutter={5}
        span={6}
        labelCol={{ span: 8 }}
        layout="horizontal"
        control="POHeader"
        sysReportName="ReportPO"
        extraButton={
          <Button type="primary" onClick={() => setVisible(true)} disabled={!record}>
            {intl.formatMessage({ id: 'PODetail' })}
          </Button>
        }
        beforeGet={(e) => {
          return { id: e.id };
        }}
        afterGet={(e) => {
          if (e.promiseDate) e.promiseDate = moment(e.promiseDate);
          return e;
        }}
        beforeNewObject={(e) => {
          return {
            approvalStatus: 'U',
            poType: 'ipo',
            buyerID: '-',
            termsCode: '-',
            entryPerson: e.userName,
            shipViaCode: '-',
            currencyCode: '-',
          };
        }}
        afterSubmit={(e) => {
          if (e.promiseDate) e.promiseDate = moment(e.promiseDate);
          return e;
        }}
        search={{
          filterType: 'light',
        }}
        record={record}
        rowKey="RowId"
        callback={(resp) => {
          setRecord(resp);
        }}
        form={form}
        bordered
      />

      <Modal
        width={1000}
        title={intl.formatMessage({ id: 'newPOLine' })}
        visible={visible}
        destroyOnClose={true}
        onCancel={() => setVisible(false)}
        footer={false}
      >
        <OperpForm
          title={intl.formatMessage({ id: 'PODetail' })}
          gutter={5}
          span={8}
          layout="horizontal"
          control="PODetail"
          sysReportName="ReportPODetail"
          search={{
            filterType: 'light',
          }}
          params={{
            PONum: record?.poNum,
          }}
          current={current}
          record={record2}
          callback={(resp) => {
            setRecord2(resp);
          }}
          beforeNewObject={() => {
            return {
              poNum: record.poNum,
              partNum: '-',
              lineDesc: '-',
              ium: 'PCS',
              uom: '-',
              classID: '-',
              revisionNum: '-',
              promiseDt: record.promiseDate,
              dueDate: record.promiseDate,
            };
          }}
          form={form2}
          extraButton={
            <Button
              type="primary"
              onClick={() => setVisible2(true)}
              disabled={!record2}
              size="small"
            >
              {intl.formatMessage({ id: 'poRel' })}
            </Button>
          }
          toolbar={['new', 'save', 'reset', 'delete']}
          bordered
        />
      </Modal>

      <Modal
        width={1000}
        title={intl.formatMessage({ id: 'newPORelNum' })}
        visible={visible2}
        destroyOnClose={true}
        onCancel={() => setVisible2(false)}
        footer={false}
      >
        <OperpForm
          title={intl.formatMessage({ id: 'poRel' })}
          gutter={5}
          span={8}
          labelCol={{ span: 6 }}
          layout="horizontal"
          control="PORel"
          sysReportName="ReportPORel"
          search={{
            filterType: 'light',
          }}
          params={{
            PONum: record2?.poNum,
            POLine: record2?.poLine,
          }}
          current={current}
          record={record3}
          beforeNewObject={() => {
            return {
              poNum: record2.poNum,
              poLine: record2.poLine,
              warehouseCode: '',
              promiseDt: record2.promiseDate,
              dueDate: record2.promiseDate,
              tranType: 'PUR_STK',
              relQty: 1,
            };
          }}
          afterGet={(e) => {
            if (e.promiseDt) e.promiseDt = moment(e.promiseDt);
            if (e.dueDate) e.dueDate = moment(e.dueDate);
            return e;
          }}
          crud={{
            update: 'Modify',
          }}
          form={form3}
          toolbar={['new', 'save', 'reset', 'delete']}
          scrollY={120}
        />
      </Modal>
    </PageContainer>
  );
};
